<template>
    <el-row class="warp" style="height:100%">
        <el-col class="publicNav" :span="3" style="height:100%;">
            <router-link class="newnava" to="/layout/system" >系统管理</router-link>
            <router-link to="/layout/systemversion">网卡配置</router-link>
            <router-link to="/layout/systemdetails" >系统配置</router-link>
        </el-col>
        <el-col :span="21" style="height:100%;">
          <div class="main-contents-box">
            <div class="main-contents-main">
                <div class="systemcontent">
                  <ul>
                    <!-- <li>
                        <el-row :span="24">
                            <el-col :span="10">
                                <div class="title-box">
                                    升级文件选取:
                                </div>
                            </el-col>
                            <el-col  :span="14">
                                <div class="content-box">
                                  <el-upload
                                      class="upload-demo"
                                      ref="upload"
                                      :limit="1"
                                      action="cgi-bin/JHUpload.cgi"
                                      :on-success="onSuccess1"
                                      :file-list="fileList"
                                      :auto-upload="false"
                                      >
                                      <el-button slot="trigger" size="small" type="primary" icon="el-icon-plus">选取文件</el-button>
                                      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" icon="el-icon-upload">确认上传</el-button>
                                  </el-upload>
                                </div>
                              </el-col>
                        </el-row>
                    </li> -->
                   <li class="ie-upgrade">
                        <el-row :span="24">
                            <el-col :span="10">
                                <div class="title-box">
                                    升级文件选取:
                                </div>
                            </el-col>
                            <el-col  :span="14">
                              
                                  <div class="content-box">
                                    <input class="sc" @change="aede" type="file"  name ="file1" id = "file1"style="opacity: 0px;display:none">
                                      <el-button  size="small" type="primary" icon="el-icon-plus" @click="newtest">选取文件</el-button>
                                      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2" icon="el-icon-upload">确认上传</el-button>
                                  </div>
                                  <div class="sc_box">
                                      <div class="sc_box_nr"> </div>
                                      <div class="sc_close el-icon-close" @click="sc_close"  style=""></div>
                                  </div>

                              </el-col>
                        </el-row>
                    </li> 


                    <li>
                        <el-row :span="24">
                            <el-col :span="10">
                              <div class="title-box">
                                  文件回滚选取:
                              </div>
                            </el-col>
                            <el-col :span="14">
                              <div class="content-box">
                                  <el-button @click="version" size="small" type="primary" icon="el-icon-plus" >版本选取</el-button>
                                  <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1" icon="el-icon-upload">确认上传</el-button> -->
                              </div>
                            </el-col>
                          </el-row>
                    </li>
                    <li>
                        <el-row :span="24">
                            <el-col :span="10">
                                <div class="title-box">
                                    系统备份:
                                </div>
                            </el-col>
                            <el-col  :span="14">
                                <div class="content-box">
                                  <el-button slot="trigger"  size="small" type="primary" @click="set_unpack">确认备份</el-button>
                                </div>
                              </el-col>
                        </el-row>
                    </li>
                    <li>
                        <el-row :span="24">
                            <el-col :span="10">
                              <div class="title-box">
                                  系统重启:
                              </div>
                            </el-col>
                            <el-col :span="14">
                              <div class="content-box">
                                  <el-button slot="trigger"  size="small" type="primary" @click ="set_reboot">确认重启</el-button>
                              </div>
                            </el-col>
                          </el-row>
                    </li>
                    <li>
                        <el-row :span="24">
                            <el-col :span="10">
                              <div class="title-box">
                                  恢复出厂设置:
                              </div>
                            </el-col>
                            <el-col :span="14">
                              <div class="content-box">
                                  <el-button slot="trigger"  size="small" type="primary" @click="set_restore">确认恢复</el-button>
                              </div>
                            </el-col>
                          </el-row>
                    </li>
                  </ul>
                </div>
            </div>
          </div>
            <el-dialog
                title="版本选取"
                :modal-append-to-body="false"
                :visible.sync="dialogVisible"
                width="30%">
                <el-table
                  ref="singleTable"
                  :data="tableData"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  style="width: 100%">
                  <el-table-column
                    property="name"
                    label="版本"
                    align="center"
                    >
                  </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="safe">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>
<script>
export default {
  name: 'system',
  data () {
    return {
      /*tableData2: [{
          date: '升级文件选取:',
      },{
          date: '升级失败回倒:',
      }],
      tableData3: [{
          date: '系统备份:',
          name:"确认备份"
      },{
          date: '系统重启:',
          name:"确认重启"
      },{
          date: '恢复出厂设置:',
          name:"确认恢复"
      }],*/
      fileList: [],
      fullscreenLoading:false,
      dialogVisible:false,
      tableData: [/*{
          date:'1111111111',
          name:'版本1',
        }, {
          date:'22222222',
          name:'版本2',
        }, {
          date:'33333333',
          name:'版本3',
        }, {
          date:'55555555',
          name:'版本5',
        }*/],
        currentRow:""//选取的版本号
    }
  },
  methods:{
    newtest(){
        $(".sc").click();
      },
      sc_close(){
        $(".sc_box").hide();
        $("#file1").val("");
      },
      aede(){
          $(".sc_box").show();
          $(".sc_box .sc_box_nr").text($(".sc").val());
      },
      submitUpload() {
        this.set_log("设备版本升级");
        this.$refs.upload.submit();
      },
      submitUpload1() {
        this.safe();
        this.set_log("设备版本回滚");
        this.$refs.upload1.submit();
      },
      submitUpload2() {
        this.set_log("设备版本升级");
        this.ajaxFileUpload();
      },
      ajaxFileUpload(){
          let that=this;
          $.ajaxFileUpload
          (
            {
                url: '../cgi-bin/JHUpload.cgi', //用于文件上传的服务器端请求地址
                fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                type:'post',
                secureuri: false,
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data)  //服务器成功响应处理函数
                {
                  /*if(data==1){
                    alert("上传成功！");
                    $(".sc_box").hide();
                  }else{
                    alert("上传失败!");
                  }*/

                  if(data == 1){
                      end_state = setInterval(function(){
                           that.get_state()
                       },2000);
                  }else{
                    this.$message({
                        message: '设备正在升级中，请稍后再试!',
                        type: 'error',
                        center:true,
                        showClose: true
                    });
                  }

                  $(".sc_box").hide();
                  $("#file1").change(function(){
                      that.aede();
                  });
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    $(".sc_box").hide();
                    $("#file1").change(function(){
                      that.aede();
                    })
                    return false;
                }
            }
        )
      },
      onSuccess(response, file, fileList){
          this.$refs.upload1.clearFiles();
          this.fullscreenLoading = true;
          const loading = this.$loading({
              lock: true,
              text: '正在升级中,即将退出',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.8)'
          });
          setTimeout(() => {
            loading.close();
          },1000)
      },
      onSuccess1(response, file, fileList){
          this.$refs.upload.clearFiles();
      },
      onError(err, file, fileList){
      },
      version(){
          this.$data.dialogVisible=true;
          //获取版本列表
          this.get_version();

      },
      handleCurrentChange(val) {
        this.$data.currentRow = val.date;
      },
      get_version(){
          let that = this;
          $.ajax({
              //url:"../static/get_newversion.json",
              url:"cgi-bin/JHGetBackupList.cgi",
              contentType: "application/json;charset=utf-8",
              type:'GET',
              data:JSON.stringify(""),
              success:function(msg){
                let data =eval( "("+msg+")" );
                if(data.state != 0 ){
                    let version_list =  that.toreverse(data);
                    that.$data.tableData = version_list.list;
                }
              }
          })

      },
      safe(){
          let that = this;
          this.$confirm('此操作十分危险,系统将会回退版本！是否继续', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              let sel_version = that.$data.currentRow;
              if(sel_version ==""){
                  this.$message({
                      message: '请选取版本!',
                      type: 'info',
                      center:true,
                      showClose: true
                  });
                  return false;
              }

              that.set_log("设备版本回滚");

              let msg = {"date":sel_version};

              $.ajax({
                  url:"cgi-bin/JHRollBack.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      //console.log(eval( "("+msg+")" ));
                      let data =eval( "("+msg+")" );
                      if(data.state == 1){
                          that.$router.push("/login");
                           /*that.$confirm('系统回退版本,即将退出到登录页面!', '提示', {
                              confirmButtonText: '确定',
                              //cancelButtonText: '取消',
                              type: 'warning'
                          }).then(() => {
                              _this.$router.push("/login");
                          }).catch(() => {
                              that.$message({
                                type: 'info',
                                message: '取消操作',
                                position:'bottom-right'
                              });
                          }); */
                      }else{
                        that.$message({
                            message: '系统回退版本失败,请重新选取!',
                            type: 'error',
                            center:true,
                            showClose: true
                          });
                      } 
                  }
              })

              //关闭版本弹窗
              this.$data.dialogVisible=false;
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
      },
      set_unpack(){
          let that = this;
          this.$confirm('系统将备份, 是否继续?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

                    if(window.sessionStorage.getItem('username')=="zyl"){
                    this.$ajax.get("./static/request.json").then(function(res){
                        //console.log(res.data);
                        if(res.data.state == 1){
                            that.$message({
                              message: '备份成功!',
                              type: 'success',
                              center:true,
                              showClose: true
                            });
                        }else{
                          that.$message({
                              message: '备份失败!',
                              type: 'error',
                              center:true,
                              showClose: true
                            });

                        }   
                    })
                }else{
                    $.ajax({
                        url:"cgi-bin/JHBackup.cgi",
                        contentType: "application/json;charset=utf-8",
                        type:"post",
                        data:JSON.stringify(""),
                        success:function(msg){
                            let data =eval( "("+msg+")" );
                            if(data.state == 1){
                                that.$message({
                                  message: '备份成功!',
                                  type: 'success',
                                  center:true,
                                  showClose: true
                                });
                            }else{
                              that.$message({
                                  message: '备份失败!',
                                  type: 'error',
                                  center:true,
                                  showClose: true
                                });

                            } 
                        }
                    })
                }   
            }).catch(() => {
              
            });
      },
      set_reboot(){
          let that = this;
          this.$confirm('系统将重启, 是否继续?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                    that.$router.push("/login");
                    if(window.sessionStorage.getItem('username')=="zyl"){
                    this.$ajax.get("./static/request.json").then(function(res){
                        let data = eval("("+res.data+")");
                        if(data.state == 1){
                            //that.$router.push("/login");
                            /*that.$message({
                              message: '重启成功!',
                              type: 'success',
                              center:true,
                              showClose: true
                            });*/
                        }else{
                          /*that.$message({
                              message: '重启失败!',
                              type: 'error',
                              center:true,
                              showClose: true
                            });*/

                        }   
                    })
                }else{
                  that.$router.push("/login");
                  this.set_log("设备重启");
                  $.ajax({
                        url:"cgi-bin/JHReboot.cgi",
                        contentType: "application/json;charset=utf-8",
                        type:"post",
                        data:JSON.stringify(""),
                        success:function(msg){
                            let data =eval( "("+msg+")" );
                            if(data.state == 1){
                                //that.$router.push("/login");
                                /*that.$message({
                                  message: '重启成功!',
                                  type: 'success',
                                  center:true,
                                  showClose: true
                                });*/
                            }else{
                              /*that.$message({
                                  message: '重启失败!',
                                  type: 'error',
                                  center:true,
                                  showClose: true
                                });*/

                            } 
                        }
                    })
                }   
            }).catch(() => {
              
            });

      },
      set_restore(){
        let that = this;
          this.$confirm('系统将恢复出厂, 是否继续?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                    if(window.sessionStorage.getItem('username')=="zyl"){
                    this.$ajax.get("./static/request.json").then(function(res){
                        if(res.data.state == 1){
                            that.$message({
                              message: '恢复出厂成功!',
                              type: 'success',
                              center:true,
                              showClose: true
                            });
                        }else{
                          that.$message({
                              message: '恢复出厂失败!',
                              type: 'error',
                              center:true,
                              showClose: true
                            });

                        }   
                    })
                }else{
                  this.set_log("设备恢复出厂");
                  $.ajax({
                        url:"cgi-bin/JHRestore.cgi",
                        contentType: "application/json;charset=utf-8",
                        type:"post",
                        data:JSON.stringify(""),
                        success:function(msg){
                            let data =eval( "("+msg+")" );
                            if(data.state == 1){
                                that.$message({
                                  message: '恢复出厂成功!',
                                  type: 'success',
                                  center:true,
                                  showClose: true
                                });
                            }else{
                              that.$message({
                                  message: '恢复出厂失败!',
                                  type: 'error',
                                  center:true,
                                  showClose: true
                                });

                            } 
                        }
                    })
                }   
            }).catch(() => {
              
            });
      },
      todate(timestamp){
          let date = new Date(timestamp*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
          let year = date.getFullYear();       //年
          let month = date.getMonth() + 1;     //月
          let day = date.getDate();            //日
          let hh = date.getHours();            //时
          let mm = date.getMinutes();          //分
          let ss = date.getSeconds();          //秒
          let clock = year + "-";
         
          if(month < 10)clock += "0";
          clock += month + "-";
       
          if(day < 10)clock += "0";  
          clock += day + " ";
         
          if(hh < 10)clock += "0";
          clock += hh + ":";

          if (mm < 10) clock += '0'; 
          clock += mm + ":";

          if(ss<10) clock += '0';
          clock +=ss; 
          //console.log(clock);
          return(clock);
      },
      toreverse(arr){
           let that = this;
           /*
          let arr = new Array();
           arr = {"list":[{"date":"1477386005"},{"date":"1477386001"},{"date":"1477386003"},{"date":"1477386008"},{"date":"1477386007"}]}*/
          arr["list"] = arr.list.sort(this.compare("date"));
           //console.log(arr);
           //排序之后需要重组数组{"list":[{"date":"1477386005","name":"版本1"}]}
          $.each(arr.list,function (i,value) {
              let name = that.todate(parseInt(value.date));
              value["name"] =name ;
              arr["list"][i] = value;
          }) 

          //console.log(arr); 
          return arr;
      },
      compare(attr){
          return function(a,b){
              let value1 = a[attr];
              let value2 = b[attr];
              return value2 - value1;
          }
      },
      set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      },
      get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    get_state(){
        let that = this;
        $.ajax({
            url:"cgi-bin/JHGetUpdateStatus.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            cache:false,
            async: false,
            data:JSON.stringify(""),
            success:function(result){
              var arr = eval("("+result+")");
              if(arr.status == 0){
                  if(arr.step == 0){
                      that.$message({
                        message: '读状态失败!',
                        type: 'error',
                        center:true,
                        showClose: true,
                        duration:0
                    });
                  }

                  if(arr.step == 1){
                      that.$message({
                        message: '备份失败!',
                        type: 'error',
                        center:true,
                        showClose: true,
                        duration:0
                    });
                  }

                  if(arr.step == 2){
                      that.$message({
                        message: '文件格式错误,解压失败!',
                        type: 'error',
                        center:true,
                        showClose: true,
                        duration:0
                      });
                  }
                  clearInterval(end_state);
              }else{
                  if(arr.step == 2){
                      clearInterval(end_state);
/*
                      that.$router.push("/login");
                      that.$message({
                          message: '系统将重启!',
                          type: 'error',
                          center:true,
                          showClose: true
                      });
                      $.ajax({
                          url:"cgi-bin/JHReboot.cgi",
                          contentType: "application/json;charset=utf-8",
                          type:"post",
                          cache:false,
                          async: false,
                          data:JSON.stringify(""),
                          success:function(msg){ 
                          }
                      })
*/

                      that.$confirm('升级成功,系统将重启!', '警告', {
                          confirmButtonText: '确定',
                          //cancelButtonText: '取消',
                          type: 'warning'
                      }).then(() => {
                          that.$router.push("/login");
                          $.ajax({
                              url:"cgi-bin/JHReboot.cgi",
                              contentType: "application/json;charset=utf-8",
                              type:"post",
                              cache:false,
                              async: false,
                              data:JSON.stringify(""),
                              success:function(msg){ 
                              }
                          })
                      })
                  }
              }  
          }
      })
     }
  },
  mounted(){
      this.check_pwd();
      //this.get_version();
  },
  created(){

  },
  beforeCreate(){//用于升级设备时清除定时器   
      window.end_state = "";
  }
}
</script>
<style scoped>
/*.systemcontent{
  width: 50%;
  margin: auto;
  min-width: 400px;
  margin-top: 10%;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  padding: 15px 20px 20px 15px;
}
.systemcontent ul li{
  width: 100%;
  height: 57px;
  line-height: 57px;
  border-bottom: 1px solid #ebeef5;
  text-align: left;
  height: auto;
}
.systemcontent ul li:hover{
  background: #f5f7fa;
}
.systemcontent ul li .title-box{
  width: 200px;
  height: 57px;
  line-height: 57px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  display: inline-block;
}
.systemcontent ul li .content-box{
    line-height: 57px;
    text-align: right;
    display: inline-block;
    margin-left: 5.5%;
    width: 94.5%;
}*/

.systemcontent{
  width: 50%;
  margin: auto;
  min-width: 400px;
  margin-top: 10%;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  padding: 15px 20px 20px 15px;
}
.systemcontent ul li{
  width: 100%;
  height: 57px;
  line-height: 57px;
  border-bottom: 1px solid #ebeef5;
  text-align: left;
  height: auto;
}
.systemcontent ul li:hover{
  background: #f5f7fa;
}
.systemcontent ul li .title-box{
  width: 200px;
  height: 57px;
  line-height: 57px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  display: inline-block;
}
.systemcontent ul li .content-box{
    line-height: 57px;
    text-align: center;
    display: inline-block;
    margin-left: 5.5%;
    width: 94.5%;
}
.progressContainer{
    height: 20px;
    width: 96%;
    border-radius: 10px;
    background-color: #ddd;
    margin-left: 2%;
  }
  .progress{
    background-color: #1C8DE0;
    border-radius: 10px;
    height:20px;
    line-height: 20px;
  }
  b{
    color:#fff;
    font-weight: 100;
    font-size: 12px;
    position:absolute;
    left:40%;
  }

  .btns {
    margin-top: 20px;
  }

  .wenjian {
    font-size: 18px;
    color: #bfbfbf;
  }

  .gouxuan {
    font-size: 15px;
    color: #70C34C;
    float: right;
    margin-top: 6px;
  }

  .chahao {
    font-size: 16px;
    color: #bfbfbf;
    float: right;
    margin-top: 6px;
  }

  .ul-class {
    width: 400px;
    margin-top: 10px;
  }

  





  .sc_box{
    width:100%;height:40px;
    display: none;
    position: relative;
     cursor: pointer;
  }
  .sc_box_nr {
    width: 100%;
    height: 100%;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
  }
  .sc_box:hover .sc_close{
  display: block;
  }
  .sc_close{
    position:absolute;
    right:0px;
    top: 10px;
    width:20px;
    height:20px;
    color:#666;
    display:none
  }
</style>
